<template>
  <transition name="fade-slide">
    <div class="cityComponent" v-if="close">
      <v-header :msg="msg2" :imgName="iconName" @close="closeList" class="header-box"></v-header>
      <div class="cityList">
        <p class="tips">您当前的收货地址</p>
        <p class="cityName"><span>{{showCityName}}</span><i class="correct fr"></i></p>
        <p class="tips tips2">收货地区(选择好你的收货地区送货更快哦)</p>
        <ul>
          <li v-for="(city,index) in cityList" @click="changeCity(city)">
            <p class="zimu">{{city.zimu}}</p>
            <p class="cityName">{{city.cityName}}</p>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
  import vHeader from './header'
  import bus from '../bus'

  export default {
    data() {
      return {
        msg2: '请选择收货地区',
        iconName: 'close',
        close: true,
        showCityName:'河南省',
        cityList: [
          {
            "zimu":"A",
            "cityName":"安徽省"
          },
          {
            "zimu":"B",
            "cityName":"北京市"
          },
          {
            "zimu":"C",
            "cityName":"重庆市"
          },
          {
            "zimu":"F",
            "cityName":"福建省"
          },
          {
            "zimu":"G",
            "cityName":"甘肃省"
          },
          {
            "zimu":"G",
            "cityName":"广东省"
          },
          {
            "zimu":"G",
            "cityName":"广西壮族自治区"
          },
          {
            "zimu":"G",
            "cityName":"贵州省"
          },
          {
            "zimu":"H",
            "cityName":"海南省"
          },
          {
            "zimu":"H",
            "cityName":"湖北省"
          },
          {
            "zimu":"H",
            "cityName":"河北省"
          },
          {
            "zimu":"H",
            "cityName":"黑龙江省"
          },
          {
            "zimu":"H",
            "cityName":"河南省"
          },
          {
            "zimu":"H",
            "cityName":"湖南省"
          },
          {
            "zimu":"J",
            "cityName":"江苏省"
          },
          {
            "zimu":"J",
            "cityName":"江西省"
          },
          {
            "zimu":"J",
            "cityName":"吉林省"
          },
          {
            "zimu":"N",
            "cityName":"内蒙古自治区"
          },
          {
            "zimu":"N",
            "cityName":"宁夏回族自治区"
          },
          {
            "zimu":"Q",
            "cityName":"青海省"
          },
          {
            "zimu":"S",
            "cityName":"山东省"
          },
          {
            "zimu":"S",
            "cityName":"上海市"
          },
          {
            "zimu":"S",
            "cityName":"山西省"
          },
          {
            "zimu":"S",
            "cityName":"陕西省"
          },
          {
            "zimu":"S",
            "cityName":"四川省"
          },
          {
            "zimu":"T",
            "cityName":"天津市"
          },
          {
            "zimu":"X",
            "cityName":"西藏自治区"
          },
          {
            "zimu":"X",
            "cityName":"新疆维吾尔自治区"
          },
          {
            "zimu":"Y",
            "cityName":"云南省"
          },
          {
            "zimu":"Z",
            "cityName":"浙江省"
          },

        ],
      }
    },
    components: {
      vHeader
    },
    methods: {
      closeList(){
        this.close = false;
      },
      changeCity(city){
        this.showCityName = city.cityName;
        bus.$emit('cityName',this.showCityName);

      }

    }
  }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  @import "../common/style/scss/cityList.scss";
  .fade-slide-enter-active, .fade-slide-leave-active {
    transition: all .5s ease;
  }
  .fade-slide-enter, .fade-slide-leave-to  {
    transform: translate3d(0,100%,0);
    opacity: .4;
  }


</style>
